<template>
  <div>
    <div class="w-full bg-[#fdc14b] flex items-center">
      <img
        src="https://pic.imgdb.cn/item/64732062f024cca173948fed.png"
        alt=""
        class=""
      />
      <span class="text-3xl ml-5 text-white">评价</span>
    </div>
    <div class="w-full mt-8">
      <div class="w-2/3 m-auto">
        <div class="flex flex-col">
          <div class="lg:text-xl xl:text-2xl">
            <div class="ml-2">
              <p>商家：{{ item.name }}</p>
            </div>
          </div>
          <div class="flex">
            <div
              class="sm:w-1/2 xl:w-1/3 sm:h-[200px] xl:h-[300px] overflow-hidden ml-2"
            >
              <img :src="img" alt="" class="w-full -mt-24" />
            </div>
            <div class="ml-5 xl:text-3xl">
              <p class="mt-2">商品：{{ item.productName }}</p>
              <p class="mt-3">介绍：{{ item.description }}</p>
              <p class="xl:mt-3">
                商家评分：<el-rate
                  v-model="value"
                  disabled
                  show-score
                  score-template="{value} 分"
                />
              </p>
              <div class="xl:mt-3">
                <div class="">
                  <p>评价:</p>
                  <el-input
                    v-model="textarea"
                    :rows="3"
                    type="textarea"
                    placeholder="请填写评价"
                    @keyup.enter="submit"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-col mt-4">
          <div
            v-for="(item, index) in userpj"
            class="border-2 border-[#fdc14b] mb-2 flex justify-between"
          >
            <div class="flex items-center w-2/12">
              <div>
                <img :src="item.userAvatar" alt="" class="w-8" />
              </div>
              <p class="ml-2">{{ item.userName }}</p>
            </div>
            <div class="border-l-2 border-r-2 border-zinc-400 w-3/5">
              <input
                type="text"
                v-model="item.comments"
                class="p-2 w-full outline-none"
                @keydown.enter="changpj(item, index)"
              />
            </div>
            <div class="w-1/12  flex justify-center items-center">
                <button class="text-white bg-[#fdc14b] px-1 rounded-full" @click="deletepj(index)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";

const route = useRoute();
let item = ref([]);
let img = ref();
let value = ref();
let textarea = ref("");
let userid = ref();
let userpj = ref([]);
let productId = ref();
onMounted(() => {
  item.value = JSON.parse(route.query.item);
  img.value = item.value.img.split(",")[1];
  value.value = item.value.score;
  userid.value = localStorage.getItem('userid')
  productId.value = item.value.productId;
  axios
    .get(
      `http://1.14.126.98:8081/product/comments?productId=${item.value.productId}&pageNum=1&pageSize=10`
    )
    .then((res) => {
      console.log(res.data);
      userpj.value = res.data;
      console.log(userpj.value);
    });
});
function submit() {
  axios
    .post(
      `http://1.14.126.98:8081/productComments/add?userId=${userid.value}&comments=${textarea.value}&productId=${item.value.productId}`
    )
    .then((res) => {
      alert(res.data.msg);
    });
  textarea.value = "";
}
//修改评价
function changpj(item, index) {
  console.log(item);
  console.log(index);
  axios
    .put(
      `http://1.14.126.98:8081/productComments/update?id=${index}&comments=${textarea.value}`
    )
    .then((res) => {
      console.log(res.data);
      axios
        .get(
          `http://1.14.126.98:8081/product/comments?productId=${productId.value}&pageNum=1&pageSize=10`
        )
        .then((res) => {
          console.log(res.data);
          userpj.value = res.data;
          console.log(userpj.value);
        });
    });
}
//删除评价
function deletepj(index){
    console.log(index);
    axios.delete(`http://1.14.126.98:8081/productComments/delete?id=${userid.value}`).then((res) => {
        console.log(res.data);
    })
}
</script>
